<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>连续移动的背景</title>
  <style>
    .body{
      box-sizing: border-box;
    }
    .container{
      width: 100%;
      height: 336px;
      border: 2px solid red;
      overflow: hidden;
    }
    .left{
      overflow: hidden;
      border: 2px solid #218300;
      animation: bg1run 3s linear infinite;
    }
    @keyframes bg1run {
      0%{
        transform: translateX(0)
      }
      to{
        transform: translateX(-3840px)
      }
    }
    @keyframes bg2run {
      0%{
        transform: translateX(0)
      }
      to{
        transform: translateX(-3840px)
      }
    }
  </style>
  
</head>
<body>
  <!--  动画连续移动技巧2 --- 2倍连续背景
      移动位置为背景宽度一半 
      另一半背景仅仅是为了 连续移动时 画面不断裂
      -->
  <div class="container">
      <img  class="left" src="../img/hebing.png" alt=""> 
  </div>
</body>
</html>